<div class="flex flex-col w-2/3 overflow-hidden group">
	<img
		src="/map.jpg"
		alt=""
		class="w-full h-full transform group-hover:opacity-50 group-hover:scale-125"
	/>
	<div
		class="w-2/3 px-20 py-5 ml-10 -mt-56 transition duration-300 delay-700 transform border-8 border-yellow-400 group-hover:-translate-y-16 group-hover:scale-105 "
	>
		<p class="text-2xl transition duration-300 transform group-hover:scale-125 ">111111111111111</p>
		<p class="leading-5 line-through ">2222222222222222222</p>
	</div>
</div>

<div class="mt-32 font-cus">你好</div>
<div class="font-mono">你好</div>
<a href="/" class="ease-in-out font-cus hover:text-blue-300">ddddddd</a>

<a href="/" class="list_a font-cus">网络安全法</a>
<a
	href="/"
	class="font-medium leading-5 transition duration-700 ease-in-out delay-200 transform list_title font-cus hover:border-blue-600 hover:translate-x-12 hover:rotate-180"
	>网络安全法</a
>

<div
	class="my-20 transition duration-300 ease-out transform sj hover:scale-150 hover:rotate-90 hover:border-blue-400"
/>
<div
	class="w-32 h-32 my-20 transition duration-300 ease-out transform bg-green-300 hover:rotate-180"
	style="transform: perspective(152px) rotateX(-1deg) rotateY(-30deg) rotateZ(9deg); transform-origin: left bottom 0px;"
/>

<div class="w-20 h-20 origin-top-right transform rotate-45 bg-yellow-400 ">
	tailwindcss 暂时不支持3D转换
</div>

<style>
	.list_a {
		@apply text-xl duration-500 opacity-75;
		color: #999;
	}
	.list_a:hover {
		@apply text-blue-600 delay-100  duration-700 opacity-100  ease-in-out;
		transform: translateX(35px);
	}
	.list_title {
		color: #666;
		background-color: #333;
	}
	.sj {
		/* @apply w-0 h-0 m-20  border-t-0 border-transparent border-white border-solid; */
		border: 40px solid #eccc68;
		width: 0;
		height: 0;
		border-top: none;
		border-left-color: transparent;
		border-right-color: transparent;
		margin-top: 20px;
		transform-origin: left top;
		transform: rotate(45deg);
	}
</style>
